<template>
    <div class="m-contaner">
        <Header/>
        <div class="block">

            <el-timeline>
                <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
                    <el-card>
                        <!--标题-->
                        <h4>
                            <!--
                                :to  动态传参，跳到详情页，具体参数和路由里的一样
                                    name: 跳到的页面的名字
                                    params: 参数
                            -->
                            <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
                                {{blog.title}}
                            </router-link>
                        </h4>
                        <!--摘要-->
                        <p>{{blog.description}}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <!--分页-->
            <!-- @current-change 改变时会触发-->
            <el-pagination class="m-page"
                           background
                           layout="prev, pager, next"
                           :current-page="currentPage"
                           :page-size="pageSize"
                           :total="total"
                           @current-change=page
            >
            </el-pagination>

        </div>
    </div>
</template>

<script>

    // 导入子组件页面头，header.vue
    import Header from "../components/Header";

    export default {
        name: "Blogs",
        data() {
            return {
                blogs: {},
                // 当前页
                currentPage: 1,
                // 总共页数
                total: 0,
                // 一页的数据，5条
                pageSize: 5,
            };

        },
        // 加载页面时
        created() {
            this.page(1);
        },
        methods: {
            page(currentPage) {
                const _this = this;
                _this.$axios.get("/blog/blogs?currentPage= " + currentPage).then(res => {
                    console.log(res);
                    // 具体数据
                    _this.blogs = res.data.data.records;
                    // 当前页
                    _this.currentPage = res.data.data.currentPage;
                    // 总页数
                    _this.total = res.data.data.total;
                    // 一页显示的数据
                    _this.pageSize = res.data.data.pageSize;


                })
            }

        },
        // 子组件
        components: {Header},

        computed: {},
    }
</script>

<style lang="less" scoped>

    .m-page {
        margin: 0 auto;
        text-align: center;
    }

</style>
